<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>demo for OEE v1.11.0.0</title>
	<script src="ol.js"></script>
	<link rel="stylesheet" href="ol.css">
</head>
<body>
	<div style="margin-bottom:8px;">
		<button id="invalidate_productinfos" >invalidate productinfos</button><br>
		<label>script(no .js):</label><input id="script" type="text" value="null" />
		<button id="invalidate_script" >invalidate script</button>
		<br>
		<label>datetime(in yyyyMMDDHHmmss):</label><input id="datetime" type="text" value="20250607000000" /><br>
		<label>styleid(no .json):</label><input id="styleid" type="text" value="null" />
		<a href="style.html" target="_blank">make style json</a>
		<button id="invalidate_style" >invalidate style</button>
		<br>
		<label>sdui:</label><input id="sdui" type="text" value="null" /><br>
		<div><button id="update">Update Map(click twice for bad data!)</button></div>
	</div>
	<div id="map" style="width:800px;height:400px;border:1px solid gray;"></div>
	<script>
		//海陆边界，用于测试，不保证准确，正式使用时要去掉。
		const vectorsource = new ol.source.Vector({
			url: "background.geojson",
			format: new ol.format.GeoJSON(),
		});
		const vectorlayer = new ol.layer.Vector(
			{
				source: vectorsource,
				style: new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: '#BABABA', width: 1,
					}),
					fill: new ol.style.Fill({
						color: 'rgba(0,0,0,0.0)',
					}),
				})
			}
		);
		//数据瓦片源
		const projection = ol.proj.get('EPSG:4326');
		const projectionExtent = projection.getExtent();
		const size = ol.extent.getWidth(projectionExtent) / 256;
		const resolutions = new Array(19);
		const matrixIds = new Array(19);
		for (let z = 0; z < 19; ++z) {
			// generate resolutions and matrixIds arrays for this WMTS
			resolutions[z] = size / Math.pow(2, z);
			matrixIds[z] = z;
		}
		const wmtsSource = new ol.source.WMTS({
			attributions: '1',
			url: 'null',  //这个地址请换成正式nginx内部代理地址 ------------------------------------
			layer: "layer",
			matrixSet: 'ms_14',
			format: 'image/png',
			projection: projection,
			tileGrid: new ol.tilegrid.WMTS({
				origin: ol.extent.getTopLeft(projectionExtent),
				resolutions: resolutions,
				matrixIds: matrixIds,
			}),
			style: 'default',
			wrapX: true,
			dimensions: {
				datetime: "20250607000000",           //这个时间字符串为年月日时分秒，请换成正式产品时间，分秒没有的时候使用00填充。 ----------------
				sdui: "{}",
				styleid: "null"
			}
		});
		const wmtsLayer = new ol.layer.Tile({
				  source:wmtsSource,
				});
		const map = new ol.Map({
			target: 'map',
			layers: [
				wmtsLayer ,
				vectorlayer                          // 正式版本去掉这个图层 ---------------------------------------
			],
			view: new ol.View({
				center: [0, 0],
				zoom: 2,
			}),
		});

		//on dom ok.
		document.addEventListener("DOMContentLoaded", function () {
			console.log("loaded");
			document.getElementById("sdui").value="{\"notused\":\"notused\"}";
		});

		//update button click
		document.getElementById("update").addEventListener("click",(event)=>{
			let scriptVal = document.getElementById("script").value ;
			let dtVal = document.getElementById("datetime").value ;
			let styleid = document.getElementById("styleid").value ;
			let sduistr = document.getElementById("sdui").value ;
			let dims = wmtsSource.getDimensions();
			dims.datetime = dtVal;
			dims.styleid=styleid;
			dims.sdui=sduistr;
			wmtsSource.clear();
			wmtsSource.refresh();

			wmtsSource.setUrl("/"+scriptVal+"/wmts/");
			wmtsSource.updateDimensions(dims);

			wmtsSource.changed();
			wmtsLayer.changed();

			map.removeLayer(vectorlayer);
			map.removeLayer(wmtsLayer);//force to redraw map.
			map.addLayer(wmtsLayer);
			map.addLayer(vectorlayer);
		});

		document.getElementById("invalidate_script").addEventListener("click",(event)=>{
			const url = "invalidate/script/?scriptname="+document.getElementById("script").value;
		    const response = fetch(url).then(resp=>resp.json())
		    .then(json=>{
		    console.log(json);
		    });
		}) ;

		document.getElementById("invalidate_productinfos").addEventListener("click",(event)=>{
			const url = "invalidate/productinfos";
		    const response = fetch(url).then(resp=>resp.json())
		    .then(json=>{
		    console.log(json);
		    });
		}) ;


		document.getElementById("invalidate_style").addEventListener("click",(event)=>{
			const url = "invalidate/style/?stylename="+document.getElementById("styleid").value;
		    const response = fetch(url).then(resp=>resp.json())
		    .then(json=>{
		    console.log(json);
		    });
		}) ;
	</script>
</body>

</html>